<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/cart.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
	</head>

	<body>
		<header id="header">
			<div class="hcontainer">
				<div class="logo">
					<a href="index.html" class="logo-link">
					</a>
				</div>
				<ul class="header-bread">
					<li class="header-bread-block active">购物车</li>
					<li class="header-bread-block">确认订单</li>
					<li class="header-bread-block">在线支付</li>
					<li class="header-bread-block">完成</li>
				</ul>
				<ul class="header-right">
					<li class="header-right-item">
						<a href="javascript:;" class="header-right-link">我的订单</a>
					</li>
					<li class="header-right-item">
						<a href="login.html" class="header-right-link">登录</a>
					</li>
					<li class="header-right-item">
						<a href="register.html" class="header-right-link">注册</a>
					</li>
				</ul>
			</div>
		</header>

		<div class="cart">
			<div class="container">
				<!--<div class="cart-empty">
						<div class="cart-empty-content">
							<div class="cart-empty-left"></div>
							<div class="cart-empty-right">
								<div class="cart-empty-title">
									购物车内还没有商品，赶紧去选购吧~
								</div>
								<div class="tips-btn">
									<a class="btn primary" href="index.html">返回商城首页</a>
								</div>
							</div>
						</div>
				</div>-->
				<table class="cart-data">
					<thead>
						<tr class="thead-tr">
							<td class="buy-product-select">
								<div class="buy-select-all">
									<input class="buy-checkbox" type="checkbox" id="all" />
									<label class="buy-product-title" for="all">全选</label>
								</div>
							</td>
							<td class="buy-name">商品</td>
							<td class="buy-price">单价(元)</td>
							<td class="buy-number">数量</td>
							<td class="buy-total">小计(元)</td>
							<td class="buy-ctrl">操作</td>
						</tr>
					</thead>
					<tbody>
						<tr class="buy-product-row">
							<td class="buy-product-select">
								<input class="buy-checkbox" type="checkbox" id="all" />
								<a href="javascript:;" class="buy-product-link">
									<img src="imges/product_details/xiangtihong.png" alt="" class="buy-product-img" />
								</a>
							</td>
							<td class="buy-name">
								<a class="buy-product-link" href="#">
									<p>魅族PRO7</p>
									<span class="buy-product-desc">全网通公开版 静谧黑 6GB+64GB</span>
								</a>
							</td>

							<td class="buy-price">
								<p>
									<span class="buy-product-price">¥3299.00</span>
								</p>
							</td>
							<td class="buy-number">
								<div class="adder">
									<button class="buy-btn-ctrl btn-minus">-</button>
									<input class="number-input" type="text" value="1" />
									<button class="buy-btn-ctrl btn-add">+</button>
								</div>
							</td>
							<td class="buy-total">
								<p>
									<span class="buy-product-price total">¥3299.00</span>
								</p>
							</td>
							<td class="buy-ctrl">
								<div class="cart-product-remove">
									X
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="cart-footer">
				<div class="container">
					<div class="cart-footer-left">
						<input class="buy-checkbox" type="checkbox" id="all" />
						<label class="buy-product-title" for="all">全选</label>
						<span class="remove-select">删除选中的商品</span>
						<span class="footer-count">共</span>
						<span class="footer-num">1</span> 件商品,已选择
						<span class="footer-num">0</span> 件
					</div>
					<div class="cart-footer-right">
						<span class="footer-right">已优惠
							<span class="footer-num">0.00</span> 元,合计(不含运费):
						<span class="footer-total">
								¥0.00
							</span>
						</span>
						<button class="btn-f">去结算</button>
					</div>
				</div>
			</div>
		</div>

		<footer id="footer"></footer>

		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/ajax.js"></script>
		<script src="js/cart.js"></script>
		<script>
			var $tbody = $("table>tbody");
			
			$tbody.on("click",".buy-btn-ctrl",e=>{
				var $btn = $(e.target),$input = $btn.siblings("input");
				var n = $input.val();
				console.log(n)
				if ($btn.html() == "+") {
					n++;
				}else{
					n--;
				}
				$input.val(n)
			})
		</script>
	</body>

</html>